<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Hacking, Hacker Culture, Git | shine</title>
        
        <meta name="author" content="shine" />
        <meta name="description" content="Talk on Hacking, Hacker Culture &amp; Introduction to Git by shine at AngelHack Kochi - Spring 2014 | April 17-18, 2014" />
        
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        
        <link rel="shortcut icon" href="img/favicon.png" />
    </head>


    <body class="impress-not-supported">

    <!--
        For example this fallback message is only visible when there is `impress-not-supported` class on body.
    -->
    <div class="fallback-message">
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
    </div>

    <div id="impress">

        <div id="title" class="step" data-scale="10">
            <p id="name">Hacking, Hacker Culture <br> &amp; <br> Introduction to Git</p>
            <q>shine</q>
            <p id="title-footnote">Doing good is part our code!</p>
            <p id="title-footer">#PDFTribute</p>
        </div>

        <!-- <div id="me" class="step" data-x="3500" data-y="-850">
            shine
        </div> -->

        <div id="about" class="step" data-x="3500" data-y="450" data-rotate="90" data-scale="2">
            <img id="pic" src="img/shine.png" />
            <p id="colg">Computer Science &amp; Engineering <br> Mar Baselios College of Engineering &amp; Technology</p>
            &nbsp;
            <div id="qualifs">
                <p>- Blogger : </p>
                <ul>
                    <li><a href="http://shiningexpressions.wordpress.com/" target="_blank">A Nomad's Travelogue</a></li>
                    <li><a href="http://blog.mozillakerala.org/" target="_blank">Mozilla Kerala Blog</a></li>
                    <li><a href="http://startatsv.com/" target="_blank">Start@SV | Startup Village Blog</a></li>
                </ul>
                <p>- FOSS Enthusiast</p>
                <p>- Involved with : </p>
                <ul>
                    <li>Mozilla Community | <a href="http://mozillakerala.org/" target="_blank">Mozilla Kerala</a></li>
                    <li>Free Software Foundation</li>
                    <li>Ubuntu Community</li>
                    <li>GNOME Project</li>
                    <li>GNU Project</li>
                </ul>
                <p>- App Developer : </p>
                <img id="droid" src="img/android.png" />    <img id="FFOS" src="img/FFOS.png" />
                <!-- <ul>
                    <li><img src="img/android.png" /></li>
                    <li><img src="img/FFOS.png" /></li>
                </ul> -->
            </div>
        </div>

        <div id="hacking" class="step title" data-x="-1850" data-y="-2400" data-scale="2">
            <h1>Hacking</h1>
        </div>

        <div id="hacker" class="step" data-x="-4000" data-y="-4250">
            <img alt="hacker" src="img/hacker1024.jpg" />
            <p class="overlay">Computer Hacker / Cracker</p>
        </div>

        <div id="hacking" class="step title" data-x="-1850" data-y="-2400" data-scale="2">
            <h1>Hacking</h1>
        </div>

        <div id="maker" class="step ml-150" data-y="-4250">
            <img alt="making stuff" src="img/making.jpg" />
        </div>

        <div id="cables" class="step" data-x="1500" data-y="-4250">
            <img alt="cables" src="img/innoz/820.jpg" />
        </div>

        <div id="wall-texture" class="step ml-150" data-x="3000" data-y="-4250">
            <img alt="Wall Texture" src="img/innoz/wall-texture.jpg" />
        </div>

        <div class="step ml-150" data-x="3130" data-y="-4250" data-scale="1.5">
            <img alt="Wall Texture" src="img/innoz/wall-texture-zoom.jpg" />
        </div>

        <div id="toilet-paper-art" class="step" data-x="4500" data-y="-4250">
            <img alt="Toilet Paper Art" src="img/innoz/ToiletPaperArt.jpg" />
        </div>

        <div id="lamp" class="step ml-150" data-x="6000" data-y="-4250">
            <img alt="Lampshade" src="img/innoz/lamp.jpg" />
        </div>

        <div id="lamp-steps" class="step" data-x="6000" data-y="-3500">
            <img alt="Lampshade Making Steps" src="img/innoz/lamp-steps.jpg" />
        </div>

        <div id="vhs" class="step" data-x="7500" data-y="-4250">
            <img alt="VHS &amp; Picture Frames" src="img/innoz/vhsframe2.jpg" />
            <img alt="VHS Frame" src="img/innoz/vhsframe.jpg" />
        </div>

        <div id="secretvhs" class="step ml-150" data-x="7500" data-y="-3500">
            <img alt="Secret Storage inside VHS box" src="img/innoz/secretvhs.jpg" />
        </div>

        <div id="hack-cultr" class="step title" data-x="1000" data-y="-2400" data-scale="4">
            <h1>Hacker Culture</h1>
        </div>

        <div id="overview" class="step" data-y="-1000" data-scale="10">    </div>

    </div>

    <div class="hint">
        <p>Use a spacebar or arrow keys to navigate</p>
    </div>

    <script>
        if ("ontouchstart" in document.documentElement) { 
            document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
        }
    </script>

    <script src="js/impress.js"></script>

    <script>impress().init();</script>

    </body>
</html>